---
type: integration
title: '@astrojs/vue'
description: '@astrojs/vueフレームワークインテグレーションを使用して、Astroプロジェクトのコンポーネントサポートを拡張する方法を学びます。'
sidebar:
  label: Vue
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vue/'
category: renderer
i18nReady: false
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

この[**Astroインテグレーション**][astro-integration]は、[Vue 3](https://vuejs.org/)コンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。

## インストール

Astroには、公式インテグレーションのセットアップを自動化するための`astro add`コマンドが含まれています。もしよろしければ、[手動でインテグレーションをインストールする](#手動インストール)こともできます。

`@astrojs/vue`をインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add vue
  ```
  </Fragment>
</PackageManagerTabs>

問題が発生した場合は、[GitHubで報告してください](https://github.com/withastro/astro/issues)。そして、以下の手動インストール手順を試してください。

### 手動インストール

まず、`@astrojs/vue`パッケージをインストールします。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/vue
  ```
  </Fragment>
</PackageManagerTabs>


ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時に`Cannot find package 'vue'`（または同様の）警告が表示される場合は、Vueをインストールする必要があります。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add vue
  ```
  </Fragment>
</PackageManagerTabs>

次に、`integrations`プロパティを使用して、インテグレーションを`astro.config.*`ファイルに適用します。

```js ins={2} ins="vue()" title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});
```

## はじめに

Astroで最初のVueコンポーネントを使用するには、[UIフレームワークのドキュメント][astro-ui-frameworks]にアクセスしてください。以下について探求します。

* 📦 フレームワークコンポーネントがどのように読み込まれるか
* 💧 クライアントサイドハイドレーションのオプション
* 🤝 フレームワークを混在させてネストする機会

## トラブルシューティング

ヘルプについては、[Discord](https://astro.build/chat)の`#support`チャンネルをチェックしてください。フレンドリーなサポートチームのメンバーがお手伝いします！

インテグレーションの詳細については、[Astroインテグレーションのドキュメント][astro-integration]も確認してください。

## 貢献

このパッケージはAstroのコアチームによってメンテナンスされています。問題やPRの提出を歓迎します！

[astro-integration]: /ja/guides/integrations-guide/

[astro-ui-frameworks]: /ja/guides/framework-components/

## オプション

このインテグレーションは`@vitejs/plugin-vue`によって提供されています。Vueコンパイラをカスタマイズするには、インテグレーションにオプションを指定できます。詳細については、`@vitejs/plugin-vue`の[ドキュメント](https://www.npmjs.com/package/@vitejs/plugin-vue)を参照してください。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // ion-で始まるすべてのタグをカスタム要素として扱う
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});
```

### appEntrypoint

`appEntrypoint`オプションをルートからの相対的なインポート指定子（例：`appEntrypoint: "/src/pages/_app"`）に設定することで、Vue `app`インスタンスを拡張できます。

このファイルのデフォルトエクスポートは、レンダリング前にVue `App`インスタンスを受け入れる関数である必要があり、[カスタムVueプラグイン](https://vuejs.org/guide/reusability/plugins.html)、`app.use`、および高度なユースケースのためのその他のカスタマイズの使用を可能にします。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});
```

```ts title="src/pages/_app.ts"
import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';

export default (app: App) => {
  app.use(i18nPlugin);
};
```

### jsx

`jsx: true`を設定することで、Vue JSXを使用できます。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ jsx: true })],
});
```

これにより、VueコンポーネントとVue JSXコンポーネントの両方のレンダリングが有効になります。Vue JSXコンパイラをカスタマイズするには、ブール値の代わりにオプションオブジェクトを渡します。詳細については、`@vitejs/plugin-vue-jsx`の[ドキュメント](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx)を参照してください。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // ion-で始まるすべてのタグをカスタム要素として扱う
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});
```

### devtools

<p><Since pkg="@astrojs/vue" v="4.2.0" /></p>

`vue()`インテグレーション設定に`devtools: true`を持つオブジェクトを渡すことで、開発中に[Vue DevTools](https://devtools-next.vuejs.org/)を有効にできます。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ devtools: true })],
});
```

#### Vue DevToolsのカスタマイズ

<p><Since pkg="@astrojs/vue" v="4.3.0" /></p>

さらにカスタマイズするには、代わりに[Vue DevTools Viteプラグイン](https://devtools-next.vuejs.org/guide/vite-plugin#options)がサポートするオプションを渡すことができます。（注：`appendTo`はサポートされていません。）

たとえば、Visual Studio Codeを使用していない場合は、`launchEditor`を好みのエディタに設定できます。

```js title="astro.config.mjs"
import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

export default defineConfig({
  // ...
  integrations: [
    vue({
      devtools: { launchEditor: "webstorm" },
    }),
  ],
});
```
